import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin = {
  install (app) {
    // 懒加载指令逻辑
    app.directive('img-lazy',{
      mounted(el,binding){
        // el:指令绑定的那个元素 img
        // binding: binding.value 指令等于号后面绑定的表达式的值  图片url
        // console.log(el,binding.value);
       const {stop} =  useIntersectionObserver(
          // el被监听对象 isIntersecting为布尔值，判断是否进入视口
          el,
          ([{ isIntersecting }]) => {
    if(isIntersecting){
      el.src = binding.value
      stop()
    }
          },
        )
      }
    })
  }
}